<template>
    <view class="container">
        <canvas type="webgl" id="webgl"></canvas>
    </view>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    onLoad() {
        uni.createSelectorQuery()
            .select('#webgl')
            .node()
            .exec((res) => {
            })
        /*var query = uni.createSelectorQuery().select('#webgl').node();
        query.exec((res) => {
            let canvas = res[0].node
            var res = uni.getSystemInfoSync()
            canvas.width = res.windowWidth * res.pixelRatio
            canvas.height = res.windowHeight * res.pixelRatio
            canvas.style = {}
            canvas.style.width = canvas.width
            canvas.style.height = canvas.height;
            console.log('canvas', canvas);
            requestAnimationFrame = canvas.requestAnimationFrame
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( canvas.width, canvas.height);
            const geometry = new THREE.BoxGeometry();
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );
			camera.position.z = 5;
            renderer.render( scene, camera )
            //this.animate()
        })*/
    },
    methods: {
        animate() {
            requestAnimationFrame( this.animate());
            renderer.render( scene, camera );
        }
    }
}
</script>
<style lang="scss" scoped>

</style>
